<template>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input
                        placeholder="请输入手机号码搜索"
                        class="input-with-select"
                        v-model="queryInfo.mobile"
                        clearable
                        @clear="getMemberList"
                        @input="getMemberList" />
                </el-col>
                    <el-col :span="5">
                      <el-input
                          placeholder="请输入用户昵称"
                          class="input-with-select"
                          v-model="queryInfo.nickname"
                          clearable
                          @clear="getMemberList"
                          @input="getMemberList" />
                    </el-col>

                    <el-col :span="4">
                      <el-input
                          placeholder="邀请人手机号"
                          class="input-with-select"
                          v-model="queryInfo.inviterMobile"
                          clearable
                          @clear="getMemberList"
                          @input="getMemberList" />
                    </el-col>

                    <el-col :span="3">
                        <el-button type="primary" @click="getMemberList">搜索</el-button>
                    </el-col>
            </el-row>

            <!-- 用户列表 -->
            <el-table :data="memberList" border stripe>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="用户头像">
                    <template v-if="scope.row.headpic" slot-scope="scope">
                        <img
                            :src="scope.row.headpic"
                            alt=""
                            class="logo_pic"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="昵称" prop="nickname"></el-table-column>
                <el-table-column
                    label="用户ID"
                    prop="id"
                    width="100"
                ></el-table-column>
                <el-table-column label="手机" prop="mobile"></el-table-column>
              <el-table-column label="邀请人手机" prop="inviterMobile"></el-table-column>
                <el-table-column label="状态">
                    <!-- 自定义列模板，使用作用域插槽，通过scope.row获取当前行的数据 -->
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="Y"
                            inactive-value="N"
                            @change="memberStateChange(scope.row)"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="注册时间"
                    prop="addTime"
                ></el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNo"
                :page-sizes="[5, 10, 20]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>


    </div>
</template>

<script>
import Api from "@/api/Api.js";
export default {
    data() {
        return {
            // 查询用户列表的参数对象
            queryInfo: {
                mobile: "",
                nickname: "",
                pageNo: 1, // 页码
                pageSize: 20, // 页大小
            },
            memberList: [],
            total: 0,
        };
    },
    created() {
        this.getMemberList();
    },
    methods: {
        getMemberList() {
            Api.getMemberList(this.queryInfo).then((res) => {
                if (res.success) {
                    this.memberList = res.data.records;
                    this.total = res.data.total;
                } else {
                    return this.$message.error("获取用户列表失败");
                }
            });
        },
        handleSizeChange(pageSize) {
            this.queryInfo.pageSize = pageSize;
            this.getUsegetMemberListrList();
        },
        handleCurrentChange(pageNo) {
            this.queryInfo.pageNo = pageNo;
            this.getMemberList();
        },
        async memberStateChange(userinfo) {
            Api.saveMemberStatus({
                id: userinfo.id,
                status: userinfo.status,
            }).then((res) => {
                if (res.success) {
                    this.$message.success("更新用户状态成功！");
                } else {
                    userinfo.status = userinfo.status == "Y" ? "N" : "Y";
                    return this.$message.error("更新用户状态失败！");
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.logo_pic {
    max-width: 100px;
}
</style>
